<template>
  <div class="search">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div class="box">
        <el-card class="box-card">
          <div class="clickChoose">
            <span> 状态:</span>
            <el-button @click="choose(0)" class="btn" :class="type == 0 ? 'click' : ''"> 全部</el-button>
            <el-button @click="choose(1)" class="btn" :class="type == 1 ? 'click' : ''"> 已审核</el-button>
            <el-button @click="choose(2)" class="btn" :class="type == 2 ? 'click' : ''"> 未审核</el-button>
            <el-button @click="choose(3)" class="btn" :class="type == 3 ? 'click' : ''"> 已审批</el-button>
            <el-button @click="choose(4)" class="btn" :class="type == 4 ? 'click' : ''"> 未审批</el-button>
          </div>
        </el-card>
        <copy ref="copyText" :code="1"></copy>
      </div>

      <div class="box">
        <el-card class="box-card">
          <el-row>
            <el-col :span="8">
              <div>
                <el-form-item label="活动名称">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="活动区域">
                  <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="活动时间">
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                      style="width: 100%;"></el-date-picker>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <copy ref="copyText" :code="2"></copy>
      </div>
      <div class="box">
        <el-card class="box-card">
          <div class="operate_location">
            <el-button>重 置</el-button>
            <el-button type="primary">查 询</el-button>
          </div>
        </el-card>
        <copy ref="copyText" :code="3"></copy>
      </div>
    </el-form>
  </div>
</template>
  
<script>
import copy from '../../components/copy.vue'

export default {
  components:{copy},
  data() {
    return {
      type: 0,
      code:"",
      ruleForm: {
        name: "",
        region: '',
        date1: '',
      }
    }
  },
  created() {

  },
  methods: {
    choose(val) {
      this.type = val
    },
  }
}
</script>
  
<style lang="less" scoped>
.search {
  margin: 40px;
  .box {
    position: relative;
    .box-card {
      margin: 0 220px 0 0;
      margin-bottom: 20px;
      .operate_location {
        text-align: right;
      }
    }
  }
}
.clickChoose {
  span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
  }

  .btn {
    margin: 0;
  }

  .click {
    background-color: #409eff;
    color: #fff;
  }
}
</style>
  